<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flask API Test Frontend</title>
<script>
// 异步请求函数
async function fetchData(url, method, data) {
    const response = await fetch(url, {
        method: method,
        headers: {
            'Content-Type': 'application/json',
        },
        body: data ? JSON.stringify(data) : null,
    });
    return response.json();
}

// 获取模型信息
async function getModelInfo() {
    const data = await fetchData('http://127.0.0.1:7878/get_info', 'POST');
    if (data.code === 200) {
        console.log('Model Info:', data.data);
        document.getElementById('modelInfo').textContent = 'Models: ' + data.data.model.join(', ');
        document.getElementById('chosenModelInfo').textContent = 'Chosen Models: ' + data.data.chosen_model.map(cm => cm.join(', ')).join(' | ');
        populateChosenModelSelect(data.data.chosen_model);
    } else {
        console.error('Failed to get model info:', data.msg);
    }
}

// 填充模型选择下拉菜单
function populateChosenModelSelect(chosenModels) {
    const chosenModelSelect = document.getElementById('chosenModel');
    chosenModelSelect.innerHTML = ''; // 清空下拉菜单
    chosenModels.forEach(modelGroup => {
        modelGroup.forEach(model => {
            const option = document.createElement('option');
            option.value = model;
            option.textContent = model;
            chosenModelSelect.appendChild(option);
        });
    });
}

// 提交问答请求
async function submitQA() {
    const chosenModel = document.getElementById('chosenModel').value;
    const temperature = document.getElementById('temperature').value;
    const question = document.getElementById('question').value;
    const data = await fetchData('http://127.0.0.1:7878/qa', 'POST', {
        chosen_model: chosenModel,
        temperature: temperature,
        question: question,
    });
    if (data.code === 200) {
        console.log('QA Response:', data.data);
        document.getElementById('qaResponse').textContent = 'Response: ' + data.data;
    } else {
        console.error('Failed to get QA response:', data.msg);
    }
}
</script>
</head>
<body>
<h1>Flask API Test Frontend</h1>

<!-- 获取模型信息 -->
<h2>Get Model Info</h2>
<button onclick="getModelInfo()">Get Model Info</button>
<p id="modelInfo"></p>
<p id="chosenModelInfo"></p>

<!-- 提交问答请求 -->
<h2>Submit QA</h2>
<label for="chosenModel">Chosen Model:</label>
<select id="chosenModel">
    <!-- 这里将动态填充模型选项 -->
</select>
<br>
<label for="temperature">Temperature:</label>
<input type="number" id="temperature" value="1">
<br>
<label for="question">Question:</label>
<input type="text" id="question" placeholder="Ask a question">
<br>
<button onclick="submitQA()">Submit QA</button>
<p id="qaResponse"></p>

<script>
// 页面加载完成后获取模型信息并填充下拉菜单
getModelInfo();
</script>
</body>
</html>